<template>
	<view>
		<u-navbar placeholder :autoBack="true" title="地块巡地"></u-navbar>
		<scroll-view @scrolltolower="onLower" @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight, backgroundColor: '#f5f5f5'}">
			<view class="foster-content">
				<template v-if="loading">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 7" :key="i"></u-skeleton>
				</template>
				<template v-else-if="!loading && dataList.length === 0">
					<u-empty
					    mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png"
					>
					</u-empty>
				</template>
				<template v-else-if="!loading && dataList.length > 0">
					<view style="padding: 32rpx;background-color: #fff;" >
						<view @click="toDetail(item)" v-for="(item, index) in dataList" :key="index" :style="{marginBottom: dataList.length-1 === index ? 0 : '32rpx'}" class="plot">
							<view style="width: 170rpx;position: relative;">
								<u--image radius="8rpx" mode="aspectFill" :src="item.landInfo && item.landInfo.image.split(',')[0]" width="100%" height="160rpx"></u--image>
								<view style="position: absolute;left: 8rpx;top: 8rpx;">
									<view :style="{backgroundColor: item.status === '0' ? appColor : '#5ac725'}" class="tag-text">{{item.status_dictText}}</view>
								</view>
							</view>
							<view class="plot-item">
								<view style="font-size: 32rpx;color: #333;font-weight: bold;margin-bottom: 8rpx;" class="u-line-1">{{item.name}}</view>
								<view style="font-size: 28rpx;color: #333;" class="u-line-1">地块名称: <text style="padding-left: 8rpx;">{{landId_dictText}}</text> </view>
								<view style="font-size: 28rpx;color: #333;" class="u-line-1">花卉品种: <text style="padding-left: 8rpx;">{{item.cropId_dictText}}</text> </view>
								<view style="font-size: 28rpx;color: #333;" class="u-line-1">农事类型: <text :style="{color: appColor, paddingLeft: '8rpx'}">{{item.operation_dictText}}</text></view>
								<view style="font-size: 28rpx;color: #333;" class="u-line-1">执行时间: <text :style="{color: appColor, paddingLeft: '8rpx'}">{{item.planTime}}</text></view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	import {landInfo} from '@/api/home.js';
	export default {
		data() {
			return {
				dataList: [], // 认养列表
				loading: false,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 10,
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		onLoad() {
			// 获取通知消息列表
			this.landInfo();
		},
		methods: {
			...mapActions(['setDetail']),
			// 详情
			toDetail(detail) {
				this.setDetail({detail});
				uni.navigateTo({
					url: '/pageDiamond1/routingInspection/report'
				})
			},
			// 获取通知消息列表
			landInfo() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: '0'
				}
				landInfo(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.dataList = empty.concat(records);
					} else {
						this.dataList = this.dataList.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				});
			},
			onLower() {
				if(this.status === 'loading') {
					this.landInfo();
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.plot {
		display: flex;
		align-items: center;
		.plot-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 16rpx;
		}
	}
	.tag-text {
		font-size: 24rpx;
		color: #fff;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
	}
</style>
